<template>
    <div class="Salary">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="计薪设置" name="first">
                <div class="Salary-inline">
                    <el-form class="demo-form-inline" label-position="right" style="max-width: 600px"
                        label-width="auto">
                        <el-form-item label="对应社保自然月">
                            <el-select placeholder="0.00" style="width: 200px;" v-model="obj.socialSecurityType">
                                <el-option label="当月" value="1"></el-option>
                                <el-option label="次月" value="3"></el-option>
                            </el-select>
                            <el-tooltip class="box-item" effect="dark"
                                content="如果201606月工资中扣除2016年6月自然月的社保公积金，请选择当月;如果扣除2016年7月自然月的社保公积金，请选择次月。"
                                placement="top">
                                <img src="../../assets/icon/3.1铃铛.svg" />
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item label="社保数据来源">
                            <el-input placeholder="社保模块" style="width: 200px;" disabled></el-input>
                            <el-tooltip class="box-item" effect="dark" content="计算工资时的五险一金金额将取自社保报表" placement="top">
                                <img src="../../assets/icon/3.1铃铛.svg" />
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item label="考勤数据来源">
                            <el-input placeholder="考勤模块" style="width: 200px;" disabled></el-input>
                            <el-tooltip class="box-item" effect="dark" content="计算工资时的考勤数据将取自考勤统计表" placement="top">
                                <img src="../../assets/icon/3.1铃铛.svg" />
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                            <el-button>重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="津贴设置" name="second">
                <el-form class="demo-form-inline" label-position="right" style="max-width: 600px" label-width="auto">
                    <el-form-item label="通用方案">
                        <el-input v-model="obj.subsidyName" placeholder="0.00" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="obj.subsidyRemark" placeholder="0.00" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="津贴名称">
                        <p>
                            <el-input placeholder="交通补贴" style="width: 150px;" disabled></el-input>
                            <el-select placeholder="0.00" style="width: 150px;"
                                v-model="obj.transportationSubsidyScheme">
                                <el-option label="每日出勤" value="1"></el-option>
                                <el-option label="每月固定" value="3"></el-option>
                            </el-select>
                            <el-tooltip class="box-item" effect="dark"
                                content="每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）" placement="top">
                                <img src="../../assets/icon/3.1铃铛.svg" />
                            </el-tooltip>
                            <el-input placeholder="0.00" v-model="obj.transportationSubsidyAmount"
                                style="width: 150px;"></el-input>
                        </p>
                        <p>
                            <el-input placeholder="通讯补贴" style="width: 150px;" disabled></el-input>
                            <el-select placeholder="0.00" style="width: 150px;"
                                v-model="obj.communicationSubsidyScheme">
                                <el-option label="每日出勤" value="1"></el-option>
                                <el-option label="每月固定" value="3"></el-option>
                            </el-select>
                            <el-tooltip class="box-item" effect="dark"
                                content="每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）" placement="top">
                                <img src="../../assets/icon/3.1铃铛.svg" />
                            </el-tooltip>
                            <el-input placeholder="0.00" v-model="obj.communicationSubsidyAmount"
                                style="width: 150px;"></el-input>
                        </p>
                        <p>
                            <el-input placeholder="午餐补贴" style="width: 150px;" disabled></el-input>
                            <el-select placeholder="0.00" v-model="obj.lunchAllowanceScheme" style="width: 150px;">
                                <el-option label="每日出勤" value="1"></el-option>
                                <el-option label="每月固定" value="3"></el-option>
                            </el-select>
                            <el-tooltip class="box-item" effect="dark"
                                content="每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）" placement="top">
                                <img src="../../assets/icon/3.1铃铛.svg" />
                            </el-tooltip>
                            <el-input placeholder="0.00" v-model="obj.lunchAllowanceAmount"
                                style="width: 150px;"></el-input>
                        </p>
                        <p>
                            <el-input placeholder="住房补贴" style="width: 150px;" disabled></el-input>
                            <el-select placeholder="0.00" style="width: 150px;" v-model="obj.housingSubsidyScheme">
                                <el-option label="每日出勤" value="1"></el-option>
                                <el-option label="每月固定" value="3"></el-option>
                            </el-select>
                            <el-tooltip class="box-item" effect="dark"
                                content="每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）" placement="top">
                                <img src="../../assets/icon/3.1铃铛.svg" />
                            </el-tooltip>
                            <el-input placeholder="0.00" v-model="obj.housingSubsidyAmount"
                                style="width: 150px;"></el-input>
                        </p>
                    </el-form-item>
                    <el-form-item label="适用计税方式">
                        <el-radio-group class="ml-4" v-model="obj.taxCalculationType">
                            <el-radio value="税前" size="large">税前</el-radio>
                            <el-radio value="税后" size="large">税后</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="GetOnSubmit">提交</el-button>
                        <el-button>重置</el-button>
                    </el-form-item>
                </el-form>

            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { getPayrollSetting } from "@/api/wageApi/SalaryApi.js"
import { ElMOpen } from '@/utils/fn.js'
const activeName = ref('first')
let obj = ref({
    // socialSecurityType: "",//社保自然月
    // subsidyName: "",//津贴方案名称
    // subsidyRemark: "",//津贴备注
    // transportationSubsidyScheme: "",//交通补贴计算类型
    // transportationSubsidyAmount: "",//交通补贴金额
    // communicationSubsidyScheme: "",//通讯补贴计算类型 
    // communicationSubsidyAmount: "",//通讯补贴金额
    // lunchAllowanceScheme: "",//午餐补贴计算类型
    // lunchAllowanceAmount: "",//午餐补贴金额
    // housingSubsidyScheme: "",//住房补助计算类型
    // housingSubsidyAmount: "",//住房补助金额
    // taxCalculationType: ""//计税方式
    communicationSubsidyAmount: "0.00",
    communicationSubsidyScheme: "0.00",
    housingSubsidyAmount: "0.00",
    housingSubsidyScheme: "0.00",
    lunchAllowanceAmount: "0.00",
    lunchAllowanceScheme: "0.00",
    socialSecurityType: "0.00",
    subsidyName: "0.00",
    subsidyRemark: "0.00",
    taxCalculationType: "0.00",
    transportationSubsidyAmount: "0.00",
    transportationSubsidyScheme: "0.00"
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
// 计薪设置
let onSubmit = () => {
    getPayrollSetting(obj.value).then((result) => {
        ElMOpen('提交成功', 'success')
    })
}
// 津贴设置
let GetOnSubmit = () => {
    getPayrollSetting(obj.value).then((result) => {
        ElMOpen('提交成功', 'success')
    })
}

</script>

<style scoped lang="scss">
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

#el-id-700-14 {
    font-weight: 600 !important;
}

.Salary {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;

    .Salary-inline {
        // width: 28%;
    }
}

.demo-form-inline {
    width: 84%;
}

.ml-4 {
    margin-top: -1px;
}
</style>